<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-14 10:36:12
-->
<template>
  <div class="login_page">

    <div class="title">
      <h4>您好</h4>
      <h4>欢迎来到财乎</h4>
    </div>

    <div class="login_form">
      <van-cell-group inset>
        <van-field
          clearable
          label=" "
          left-icon="phone-o"
          placeholder="请输入手机"
          maxlength="11"
          label-width="0px"
          v-model="login_data.mobile"
        />
        <van-field
          clearable
          label=" "
          left-icon="eye-o"
          placeholder="请输入密码"
          maxlength="20"
          label-width="0px"
          v-if="LOGIN_TYPE === 1"
          v-model="login_data.password"
        />
        <van-field
          clearable
          label=" "
          left-icon="underway-o"
          placeholder="请输入验证码"
          label-width="0px"
          maxlength="6"
          v-if="LOGIN_TYPE === 0"
          v-model="login_data.checkCode"
        >
          <template #button>
            <van-button
              size="mini"
              round
              type="warning"
              plain
              @click="handleGetCode"
              >{{ btnTxt }}</van-button
            >
          </template>
        </van-field>

        <div class="forget_pwd" v-if="LOGIN_TYPE === 1">忘记密码</div>

        <van-button
          type="primary"
          round
          block
          style="margin: 40px 0"
          @click="handleLogin"
          >立 即 登 录</van-button
        >
      </van-cell-group>
    </div>

    <van-divider
      :style="{ color: '#999', borderColor: '#ccc', padding: '0 30px' }"
    >
      其他登录方式
    </van-divider>

    <div class="other_login">
      <div>
        <van-icon name="chat" @click="LOGIN_TYPE = 0" />
      </div>
      <div>
        <van-icon name="lock" @click="LOGIN_TYPE = 1" />
      </div>
      <div>
        <van-icon name="wechat" style="color: #2d8907" @click="handleLoginWx" />
      </div>
    </div>

    <div class="login_txt">
      <p>登录即代表你同意<span @click="handleAgree(1)">《用户协议》</span></p>
      <p>和<span @click="handleAgree(2)">《隐私保护政策》</span></p>
    </div>
  </div>

  <AgreementCommon
    ref="AgreementCommon1"
    src="http://www.caihuapp.com/mobile/#/Agreement"
  ></AgreementCommon>
  <AgreementCommon
    ref="AgreementCommon2"
    scr="http://www.caihuapp.com/mobile/#/Privacy"
  ></AgreementCommon>
</template>



<script>
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { shortMsgLoginOrRegister, loginWord, getCode } from "@/api/login";
import storage from "@/utils/storage.js";
import { encruption, is_weixin } from "@/utils/index";
export default defineComponent({
  setup() {
    const router = useRouter();
    const LOGIN_TYPE = ref(0); //0 code 1 pwd 2 phone
    const btnTxt = ref("获取验证码");
    const login_data = reactive({
      mobile: "",
      checkCode: "",
      password: "",
      inviteCode: "",
    });
    const handleGetCode = async () => {
      let num = 60;
      const res = await getCode({
        mobile: login_data.mobile,
        type: 9,
      });
      var timer = setInterval(() => {
        if (num <= 0) {
          num = 60;
          btnTxt.value = "获取验证码";
          clearInterval(timer);
        } else {
          num--;
          btnTxt.value = `${num}s后获取`;
        }
      }, 1000);
    };
    const handleLogin = async () => {
      if (LOGIN_TYPE.value === 0) {
        //短信
        const res = await shortMsgLoginOrRegister(login_data);
        if (typeof res === "object") {
          LoginSucc(res);
        }
      } else if (LOGIN_TYPE.value === 1) {
        //密码
        let data = { ...login_data };
        data.account = data.mobile;
        data.password = encruption(data.password);
        delete data.checkCode;
        delete data.mobile;
        const res = await loginWord(data);
        if (typeof res === "object") {
          LoginSucc(res);
        }
      }
    };
    // 登录成功
    const LoginSucc = (res) => {
      storage.setStorage("v3_userinfo_mobile", JSON.stringify(res.user));
      storage.setStorage("token", res.token);
      storage.setStorage("pwd", JSON.stringify({}));
      // 检测环境
      if (is_weixin()) {
        let appid = "wx31c4b28250a3a067";
        let redirect_uri = encodeURIComponent(
          `http://app.caihuapp.com/user/user/web/wxPubBind?tagLink=v3`
        );
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=${res.user.userId}`;
      } else {
        router.push("/my");
      }
    };

    // 微信登录
    const handleLoginWx = () => {
      let appid = "wx31c4b28250a3a067";
      let redirect_uri = encodeURIComponent(
        "http://www.caihuapp.com/v3mobile/#/code"
      );
      window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo`;
    };

    const AgreementCommon1 = ref();
    const AgreementCommon2 = ref();
    const handleAgree = (v) => {
      if (v === 1) {
        AgreementCommon1.value.show = true;
      } else {
        AgreementCommon2.value.show = true;
      }
    };
    return {
      LOGIN_TYPE,
      login_data,
      btnTxt,
      handleLogin,
      handleGetCode,
      handleLoginWx,
      handleAgree,
      AgreementCommon1,
      AgreementCommon2,
    };
  },
});
</script>






<style lang="scss" scoped>
.login_page {
  .return_logo {
    position: fixed;
    top: 20px;
    left: 20px;
  }
  .title {
    text-align: left;
    width: 85%;
    margin: 0 auto;
    margin-top: 30%;
    h4 {
      line-height: 20px;
    }
  }
  .login_form {
    margin-top: 10%;
  }
  .other_login {
    display: flex;
    justify-content: center;
    div {
      width: 50px;
      height: 50px;
      margin: 0 20px;
      i {
        font-size: 40px;
      }
    }
  }
  .login_txt {
    font-size: 14px;
    text-align: center;
    p {
      line-height: 10px;
    }
    span {
      color: #1a89f1;
    }
  }
  .forget_pwd {
    text-align: right;
    font-size: 14px;
    margin-top: 20px;
    margin-right: 20px;
  }
}
</style>